<!--
 * @Author: your name
 * @Date: 2020-07-15 11:06:47
 * @LastEditTime: 2020-08-25 12:14:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \antd-vue-pro\src\views\d3Demo\linePath.vue
--> 
<template>
<div>
    <div>
        <div ref='testfont' class="testfont">asdfasfdasdfasdfasfdasdfasdfasfd</div>
        <a-button type="primary" @click="copyfont">
            复制
        </a-button>
    </div>

    <svg id="pathLine" :width="style.width" :height="style.height">
        <g id="mainGroup">
            <path class="path" id="dataPath" />
        </g>
    </svg>

    <svg id="pathLine2" :width="style.width" :height="style.height">
        <g id="mainGroup2">
            <path class="path" id="dataPath2" />
        </g>
    </svg>
</div>
</template>

<script>
function copy(str) {
    var save = function (e) {
        e.clipboardData.setData('text/plain', str); //下面会说到clipboardData对象
        e.preventDefault(); //阻止默认行为
    }
    document.addEventListener('copy', save);
    document.execCommand("copy"); //使文档处于可编辑状态，否则无效
}
export default {
    data() {
        return {
            line: '',
            data: [],
            data2: [],
            style: {
                width: 800,
                height: 200,
                marginLeft: 120
            }
        }
    },
    mounted() {
        this.data = this.data2 = this.randomData()
        this.drawLine()
        this.drawLine2()
    },
    methods: {
        copyfont() {
            const testfont = this.$refs.testfont.innerText;
            console.log(testfont);
            // const font = ;
            // console.log(font);
            copy(testfont)
            window.location.replace('weixin://');
        },
        getScale() {
            const innerWidth = this.style.width - this.style.marginLeft
            const g = d3
                .select('#mainGroup')
                .attr('width', innerWidth)
                .attr('height', this.style.height)
                .attr('transform', `translate(${this.style.marginLeft},0)`)
            const g2 = d3
                .select('#mainGroup2')
                .attr('width', innerWidth)
                .attr('height', this.style.height)
                .attr('transform', `translate(${this.style.marginLeft},0)`)
            const yScale = d3
                .scaleLinear()
                .domain([0, 10])
                .range([0, this.style.height])
            const xScale = d3
                .scaleTime()
                .range([0, innerWidth])
                .domain(d3.extent(this.data, (d, i) => i))
            const yAxis = d3.axisLeft(yScale)
            const xAxis = d3.axisBottom(xScale)
            g.append('g').call(yAxis)
            g2.append('g').call(yAxis)

            return {
                xScale,
                yScale
            }
        },
        drawLine() {
            const scale = this.getScale()
            const line = d3
                .line()
                .x((d, i) => scale.xScale(i))
                .y(d => scale.yScale(d))
                .curve(d3.curveCardinal.tension(0.5))

            const path = d3.select('#dataPath')
            path
                .datum(this.data)
                .transition()
                .duration(2000)
                .attr('d', line)
            let timeId = setTimeout(() => {
                this.data = this.randomData()
                this.drawLine()
            }, 1000)
        },
        drawLine2() {
            const scale = this.getScale()
            const line = d3
                .line()
                .x((d, i) => scale.xScale(i))
                .y(d => scale.yScale(d))
                .curve(d3.curveCardinal.tension(0.5))

            const path = d3.select('#dataPath2')
            path
                .datum(this.data2)
                .transition()
                .duration(2000)
                .attr('d', line)
            let timeId = setTimeout(() => {
                this.data2 = this.randomData2()
                this.drawLine2()
            }, 1000)
        },
        randomData() {
            let ret = []
            for (let i = 0; i < 10; i++) {
                ret.push(Math.random() * 10)
            }
            return ret
        },
        randomData2() {
            this.data2.push(Math.random() * 10)
            this.data2.shift()
            return this.data2
        }
    }
}
</script>

<style lang="less">
.path {
    fill: none;
    stroke: #76bf8a;
    stroke-width: 3px;
}
</style>
